<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form
				inline
				query
				label-width="70px"
				:model="queryParams"
				:formItem="[
					{ prop: 'likePostCode', label: '岗位编码' },
					{ prop: 'likePostName', label: '岗位名称' },
					{
						itemType: 'select',
						prop: 'status',
						label: '状态',
						list: $store.dict.sysNormalDisable
					}
				]"
				:searchFn="() => refTable.reload()"
			/>
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10" v-hasPermi="['system:post:add', 'system:post:remove', 'system:post:export']">
				<el-button type="primary" icon="Plus" @click.prevent="insertFn" v-hasPermi="['system:post:add']">新增</el-button>
				<el-button-group>
					<my-button-export :load="Export" :disabled="!state.list.length" v-hasPermi="['system:post:export']" />
				</el-button-group>
				<el-button
					type="danger"
					:disabled="!tableSelection.length"
					@click.prevent="deleteFn(tableSelection)"
					icon="Delete"
					v-hasPermi="['system:post:remove']"
				>
					删除
				</el-button>
			</div>
			<my-list-panel ref="refTable" :loadFn="loadData" :total="state.total">
				<my-table :data="state.list" :columns="state.columns" @selection-change="(val) => (tableSelection = val)">
					<template #status="{ row }">
						<el-switch
							v-model="row.status"
							inline-prompt
							:active-value="0"
							:inactive-value="1"
							active-text="启"
							inactive-text="停"
							@change="statusFn(row)"
						/>
					</template>
					<template #default="{ row }">
						<my-button-text @click.prevent="updateFn(row)" v-hasPermi="['system:post:edit']">修改</my-button-text>
					</template>
				</my-table>
			</my-list-panel>
		</div>

		<!-- 添加或修改岗位对话框 -->
		<el-dialog :title="dialogTitle" v-model="dialog.open" width="500px" append-to-body @closed="resetForm(refDialogForm)">
			<my-form
				ref="refDialogForm"
				label-width="100px"
				:model="dialog.form"
				:formItem="[
					{ prop: 'postName', label: '岗位名称' },
					{ prop: 'postCode', label: '岗位编码' },
					{ itemType: 'number', prop: 'postSort', label: '岗位顺序', min: 0 },
					{ prop: 'status', label: '状态' },
					{ prop: 'remark', label: '备注', type: 'textarea' }
				]"
			>
				<template #status>
					<el-radio-group v-model="dialog.form.status">
						<el-radio v-for="dict in $store.dict.sysNormalDisable" :key="dict.dictValue" :label="dict.dictValue * 1">
							{{ dict.dictLabel }}
						</el-radio>
					</el-radio-group>
				</template>
			</my-form>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取消</el-button>
				<el-button type="primary" @click.prevent="dialogSubmitFn()">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="system/post">
import { pagePost as page, removePost as remove, addPost as add, editPost as edit, infoPost as info, exportPost } from '@/api/system';
import { downloadBlob } from '@u/download';

const columns = [
	{
		type: 'selection'
	},
	{
		label: '岗位编号',
		width: '100',
		prop: 'id'
	},
	{
		label: '岗位编码',
		prop: 'postCode'
	},
	{
		label: '岗位名称',
		prop: 'postName'
	},
	{
		label: '岗位排序',
		prop: 'postSort'
	},
	{
		label: '状态',
		prop: 'status'
	},
	{
		label: '创建时间',
		prop: 'createTime'
	},
	{
		label: '备注',
		prop: 'remark'
	},
	{
		label: '操作',
		width: '100'
	}
];

const { queryParams, refTable, state, refDialogForm, tableSelection, dialog, dialogTitle, loadData, insertFn, deleteFn, updateFn, dialogSubmitFn } =
	pageMixin({
		queryParamsDefault: {
			orderByColumn: 'postSort'
		},
		columns,
		api: { page, remove, add, edit, info },
		dialogDefault: {
			title: '岗位',
			open: false,
			form: {
				postId: undefined,
				postSort: 0,
				status: 0
			}
		}
	});

/**
 * 启用、停用
 */
function statusFn(row) {
	if (row.id) {
		const text = row.status === 0 ? '启用' : '停用';
		confirm(`确认要—${text}（${row.postName}）岗位吗?`)
			.then(() => edit(row))
			.then(() => {
				msgSuccess(text + '成功');
			})
			.catch(() => {
				row.status = row.status === 0 ? 1 : 0;
				msgInfo('已取消！');
			});
	}
}

/**
 * 导出按钮操作
 * */
function Export() {
	return exportPost(queryParams).then((data) => {
		downloadBlob(data, '岗位管理.xlsx');
	});
}
$store.dict.GETsysNormalDisable();
</script>
